<template>
	<view class="content unify-flex">
		<view class="cut-off-rule" v-for="i in num" :key="i"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0
			}
		},
		created() {
			this.initPieceNum() // 回调初始化
		},
		methods: {
			// 初始化块数
			initPieceNum() {
				let windowWidth = this.windowWidth;
				this.num = parseInt(windowWidth % 15 === 0? windowWidth / 15: (windowWidth / 15) - 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		justify-content: space-between;
	}
	
	.cut-off-rule {
		width: 15px;
		height: 3px;
		transform: skewX(45deg);
		float: left;
	}
	
	.cut-off-rule:nth-child(4n+1) {
		background-color: red;
	}
	.cut-off-rule:nth-child(4n+3) {
		background-color: #007AFF;
	}
</style>
